<template>
    <div>
        <el-tabs v-model="activeName" type="card">
            <el-tab-pane label="展示列表" name="RecordTable" class="test"><record-table/></el-tab-pane>
            <el-tab-pane label="展示列表2" name="RecordDetails"><record-details/></el-tab-pane>
        </el-tabs>
    </div>
</template>

<script>
    import RecordTable from "../../components/clock/RecordTable";
    import RecordDetails from "../../components/clock/RecordDetails";
    export default {
        name: "ClockRecords",
        components:{
            RecordTable,RecordDetails
        },
        data(){
            return {
                activeName:'RecordDetails'
            }
        }

    }
</script>

<style scoped>
    /* 用来设置当前页面element全局table 选中某行时的背景色*/
    /deep/ .el-table__body tr.current-row>td{
        background-color: rgba(35,29,37,.9) !important;
        /* color: #f19944; */  /* 设置文字颜色，可以选择不设置 */
    }
    /deep/ .el-table, /deep/ .el-table__expanded-cell {
        background-color: rgba(35,29,37,.26);
    }
    /deep/ .el-table th, /deep/ .el-table tr, /deep/ .el-table td{
        background-color: rgba(35,29,37,.26);
    }
    /deep/ .el-table--enable-row-transition, /deep/ .el-table__body td, /deep/ .el-table .cell{
        background-color: rgba(35,29,37,.1);;
    }
    /deep/ .el-table .cell{
        color: rgba(256, 256, 256, 0.78);
    }

    /deep/ .el-tabs__item {
        padding: 0 20px;
        height: 40px;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        line-height: 40px;
        display: inline-block;
        list-style: none;
        font-size: 15px;
        font-weight: 500;
        color: rgba(256, 256, 256, 0.78);
        position: relative;
    }

    /deep/  .el-tabs__item.is-active {
        color: #409EFF;
    }

    /deep/  .el-tabs__item:hover {
        color: #409EFF;
        cursor: pointer;
    }

</style>
